import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
//编写一个函数，接收一个老组件，返回一个新组件
//会向新组件传递额外的属性，这样的话所有的老组件就可以共享此逻辑，或者说共享此属性了
//高阶组件可以实现属性代理，可以给老组件传递额外的属性
function withTime(OldComponent){
    /* return class extends Component{
        render(){
            return <OldComponent time={new Date().toLocaleTimeString()}/>
        }
    } */
    return ()=>{
        return <OldComponent time={new Date().toLocaleTimeString()}/>
    }
}
function Counter1({time}){
    return <div>当时的时间:{time}</div>
}
function Counter2({time}){
    return <div>当时的时间:{time}</div>
}
function Counter3({time}){
    return <div>当时的时间:{time}</div>
}
const Counter1WithTime = withTime(Counter1);
const Counter2WithTime = withTime(Counter2);
const Counter3WithTime = withTime(Counter3);
let element = (
    <div>
        <Counter1WithTime/>
        <Counter2WithTime/>
        <Counter3WithTime/>
    </div>
)
let root = createRoot(document.getElementById('root'))
root.render(element);
